<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="author" content="wangbo">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <!-- jsx JavaScript 和xml 相互的整合出来的,将thml 翻译成js -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <script type="text/babel">
    // 设计方面的 ps ,ai 小米logo 去了4个角,花了400
    const name_arr = ['html','css3','JavaScript','es6','node','vue','webpack','react','小程序','uni-app']; 
    function show(arry) {
        // 返回一批类似,相同的数据
        const html_arr=[]
        // es6
        for(let item of arry.entries()) {
            html_arr.push(<li key={item[0]}>{item[1]}</li>) 
        }
        return html_arr;
    }
    // show(name_arr);
    // 用{},用到了前边定义的变量或者是方法,或者是js的对象
    const h1 = <h1>前端学习的进度列表</h1>;
    const ul = <ul>{show(name_arr)}</ul>
     ReactDOM.render([h1,ul],document.getElementById("app"))

    </script>
</body>
</html>